<!DOCTYPE html>
<html lang="en">

<head>
    {{> partials/head}}
    <style>
        .hero {
            width: 100%;
        }

        .hero-content-container {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 100%;
            padding: 40px 10px 10px;
        }

        .hero-title {
            font-size: 30px;
            font-weight: bolder;
            text-align: center;
        }

        .hero-subtitle {
            font-size: 24px;
            text-align: center;
        }

        .stats-container {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding-top: 10px;
        }

        .stats {
            align-items: center;
            justify-content: center;
            white-space: normal;
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            width: 1400px;
            border-top: 2px solid var(--fg-color);
            border-bottom: 2px solid var(--fg-color);
        }

        .stat {
            font-size: 17px;
        }

        .manage-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-direction: column;
        }

        .manage-grid-container {
            width: 1400px;
        }

        .manage-grid {
            width: 100%;
            padding: 10px;
            display: grid;
            grid-template-rows: 1fr;
            grid-template-columns: 1fr 2px 1fr 2px 1fr;
            align-items: center;
            justify-content: center;
        }

        @media (max-width: 1400px) {
            .manage-grid-container {
                width: 100%;
            }

            .stats {
                width: 90%;
            }
        }

        .card-content {
            flex-grow: 1;
        }

        .manage-passwd {
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-rows: min-content 1fr min-content;
            grid-template-columns: 1fr;
            padding: 10px 20px;
        }

        .manage-tokens {
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-rows: min-content 1fr min-content;
            grid-template-columns: 1fr;
            padding: 10px 20px;
        }

        .manage-passwd-title,
        .manage-tokens-title,
        .manage-accounts-title {
            width: 100%;
            text-align: center;
            font-size: 21px;
            font-weight: bold;
            padding: 5px 0;
        }

        .manage-passwd-field,
        .manage-tokens-field {
            display: flex;
            flex-direction: column;
            width: 100%;
            padding: 5px 0;
        }

        .manage-passwd-field:first-child,
        .manage-tokens-field:first-child {
            padding-top: 0;
        }

        .manage-passwd-label,
        .manage-tokens-label {
            font-weight: bold;
            padding-bottom: 5px;
        }

        .manage-passwd-input,
        .manage-tokens-input {
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding: 7px 10px;
            color: var(--fg-color);
            background: transparent;
            font-size: 16px;
            font-weight: 600;
            font-family: "Fira Sans", sans-serif;
            border-radius: 5px;
            border: solid 2px var(--darker-bg-color);
            transition: border-color 0.15s;
        }

        .manage-passwd-input:focus,
        .manage-tokens-input:focus {
            border-color: var(--fg-color);
        }

        .manage-passwd-input:invalid,
        .manage-tokens-input:invalid {
            box-shadow: none;
            {{!-- border-bottom: 2px solid #C00; --}}
        }

        .manage-passwd-button,
        .manage-tokens-button {
            width: 100%;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 2px solid var(--darker-bg-color);
            border-radius: 5px;
            background: transparent;
            cursor: pointer;
            font: inherit;
            font-weight: bold;
            text-align: center;
            color: inherit;
            background-color: inherit;
            padding: 7px 20px;
            transition: background-color 0.15s, border-color 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 5px;
        }

        .manage-passwd-button:hover,
        .manage-passwd-button:focus,
        .manage-tokens-button:hover,
        .manage-tokens-button:focus {
            border: 2px solid var(--fg-color);
            background-color: var(--dark-bg-color);
        }

        .manage-passwd-button:disabled,
        .manage-tokens-button:disabled {
            border: 2px solid var(--darker-bg-color);
            background-color: var(--dark-bg-color);
            cursor: default;
        }

        .manage-passwd-success-msg {
            padding: 10px;
            background-color: var(--success-bg-color);
            color: var(--success-fg-color);
            border-radius: 5px;
            margin: 5px 0;
            font-weight: bold;
        }

        .manage-passwd-error-msg {
            padding: 10px;
            background-color: var(--danger-bg-color);
            color: var(--danger-fg-color);
            border-radius: 5px;
            margin: 5px 0;
            font-weight: bold;
        }

        .manage-tokens-entries {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 5px;
            padding: 10px 0;
        }

        .manage-tokens-empty {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            color: var(--lighter-fg-color);
        }

        .manage-tokens-create {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .manage-tokens-success-msg {
            padding: 10px;
            background-color: var(--success-bg-color);
            color: var(--success-fg-color);
            border-radius: 5px;
            margin: 5px 0;
            font-weight: bold;
        }

        .manage-tokens-error-msg {
            padding: 10px;
            background-color: var(--danger-bg-color);
            color: var(--danger-fg-color);
            border-radius: 5px;
            margin: 5px 0;
            font-weight: bold;
        }

        .separator-container {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .separator {
            background-color: var(--fg-color);
            width: 90vw;
            height: 100%;
        }

        .manage-accounts {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-direction: column;
            padding: 10px 20px;
        }

        .manage-accounts-content {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            flex-direction: column;
            gap: 10px;
        }

        .manage-accounts-section {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 5px;
        }

        .manage-accounts-section-title {
            font-weight: bold;
            text-align: center;
        }

        .grouped {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: nowrap;
            white-space: nowrap;
            font-weight: bold;
            text-align: center;
        }

        .grouped > * {
            padding: 5px 10px;
            border: 2px solid;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .grouped > *:first-child {
            border-radius: 5px 0 0 5px;
        }

        .grouped > *:last-child {
            border-radius: 0 5px 5px 0;
        }

        .grouped > *:not(:last-child) {
            margin-right: -2px;
        }

        .grouped-label {
            color: var(--fg-color);
            border-color: var(--darker-bg-color);
            background-color: var(--dark-bg-color);
        }

        .grouped-button {
            cursor: pointer;
            transition: background-color 0.15s, border-color 0.15s;
            border-color: var(--darker-bg-color);
        }

        .grouped-button:hover,
        .grouped-button:focus {
            z-index: 2;
            border-color: var(--fg-color);
            background-color: var(--dark-bg-color);
        }

        @media (max-width: 1000px) {
            .manage-grid {
                grid-template-rows: min-content 2px min-content 2px min-content;
                grid-template-columns: 1fr;
            }

            .manage-passwd {
                grid-template-rows: repeat(3, min-content);
                grid-template-columns: 1fr;
            }

            .manage-passwd,
            .manage-tokens {
                border-right: none;
                border-left: none;
            }

            .manage-tokens {
                padding-top: 5px;
            }
        }

        @media (prefers-color-scheme: dark) {
            .manage-passwd-input,
            .manage-tokens-input {
                border-color: var(--darker-fg-color);
            }

            .manage-tokens-entry-name {
                background-color: var(--lighter-bg-color);
            }

            .manage-passwd-button,
            .manage-tokens-button,
            .manage-tokens-entry-name,
            .manage-tokens-entry-revoke {
                border-color: var(--darker-fg-color);
            }

            .manage-passwd-button:disabled,
            .manage-tokens-button:disabled,
            .manage-tokens-entry-revoke:disabled {
                border-color: var(--darker-fg-color);
                background-color: var(--dark-fg-color);
                color: var(--bg-color);
            }

            .grouped-label, .grouped-button {
                border-color: var(--darker-fg-color);
            }
        }
    </style>
</head>

<body>
    {{> partials/navbar}}
    <div class="hero">
        <div style="height: 50px"></div>
        <div class="hero-content-container">
            <div class="hero-title">Account management</div>
            <div class="hero-subtitle">Manage your account settings here.</div>
        </div>
    </div>
    <div class="stats-container">
        <div class="stats">
            <div class="stats-block">
                <div class="stat">Name:&nbsp;<b>{{ author.name }}</b></div>
                <div class="stat">Email:&nbsp;<b>{{ author.email }}</b></div>
                <div class="stat"><b>{{ owned_crates_count }}</b>&nbsp;crates owned</div>
                <div class="stat"><b>{{ open_sessions_count }}</b>&nbsp;currently open sessions</div>
            </div>
        </div>
    </div>
    <div class="manage-container">
        <div class="manage-grid-container">
            <div class="manage-grid">
                <form class="manage-passwd" method="POST" action="/account/manage/password">
                    <div class="manage-passwd-title">Change password</div>
                    <div class="manage-passwd-fields">
                        <div class="manage-passwd-field">
                            <label class="manage-passwd-label" for="current-password">Current password:</label>
                            <input class="manage-passwd-input" type="password" name="password" id="current-password" placeholder="Enter current password..." autocomplete="current-password" required>
                        </div>
                        <div class="manage-passwd-field">
                            <label class="manage-passwd-label" for="new-password">New password:</label>
                            <input class="manage-passwd-input" type="password" name="new-password" id="new-password" placeholder="Enter new password..." autocomplete="new-password" required>
                        </div>
                        <div class="manage-passwd-field">
                            <label class="manage-passwd-label" for="confirm-password">Confirm new password:</label>
                            <input class="manage-passwd-input" type="password" name="confirm-password" id="confirm-password" placeholder="Confirm new password..." autocomplete="off" required>
                        </div>
                        {{#if (equal flash.kind "password-change-success")}}
                        <div class="manage-passwd-field manage-passwd-success-msg">
                            Success: {{ flash.message }}
                        </div>
                        {{/if}}
                        {{#if (equal flash.kind "password-change-error")}}
                        <div class="manage-passwd-field manage-passwd-error-msg">
                            Error: {{ flash.message }}
                        </div>
                        {{/if}}
                    </div>
                    <input class="manage-passwd-button" type="submit" value="Change password">
                </form>
                <div class="separator-container">
                    <div class="separator"></div>
                </div>
                <div class="manage-accounts">
                    <div class="manage-accounts-title">External Accounts</div>
                    <div class="manage-accounts-content">
                        <div class="manage-accounts-section">
                            <div class="manage-accounts-section-title">Currently attached services:</div>
                            {{#if author.github_id}}
                            <div class="grouped">
                                <div class="grouped-label">GitHub</div>
                                <a class="grouped-button" href="/account/github/detach">Detach</a>
                            </div>
                            {{/if}}
                            {{#if author.gitlab_id}}
                            <div class="grouped">
                                <div class="grouped-label">GitLab</div>
                                <a class="grouped-button" href="/account/gitlab/detach">Detach</a>
                            </div>
                            {{/if}}
                        </div>
                        <div class="manage-accounts-section">
                            <div class="manage-accounts-section-title">Services available to attach:</div>
                            {{#unless author.github_id}}
                            <div class="grouped">
                                <div class="grouped-label">GitHub</div>
                                <a class="grouped-button" href="/account/github/attach">Attach</a>
                            </div>
                            {{/unless}}
                            {{#unless author.gitlab_id}}
                            <div class="grouped">
                                <div class="grouped-label">GitLab</div>
                                <a class="grouped-button" href="/account/gitlab/attach">Attach</a>
                            </div>
                            {{/unless}}
                        </div>
                    </div>
                </div>
                <div class="separator-container">
                    <div class="separator"></div>
                </div>
                <div class="manage-tokens">
                    <div class="manage-tokens-title">Tokens</div>
                    <div class="manage-tokens-entries">
                        {{#each tokens}}
                        <div class="grouped">
                            <div class="grouped-label">{{ this.name }}</div>
                            <a class="grouped-button" href="/account/manage/tokens/{{ this.id }}/revoke">Revoke</a>
                        </div>
                        {{else}}
                        <div class="manage-tokens-empty">No tokens...</div>
                        {{/each}}
                    </div>
                    <form class="manage-tokens-create" method="POST" action="/account/manage/tokens">
                        <div class="manage-tokens-field">
                            <label class="manage-tokens-label" for="token-name">New token name:</label>
                            <input class="manage-tokens-input" type="text" name="token-name" id="token-name" placeholder="Enter token name..." required>
                        </div>
                        {{#if (equal flash.kind "token-generation-success")}}
                        <div class="manage-tokens-field manage-tokens-success-msg">
                            Created token: {{ flash.message }}
                        </div>
                        {{/if}}
                        {{#if (equal flash.kind "token-revocation-success")}}
                        <div class="manage-tokens-field manage-tokens-success-msg">
                            Success: {{ flash.message }}
                        </div>
                        {{/if}}
                        {{#if (equal flash.kind "token-revocation-error")}}
                        <div class="manage-tokens-field manage-tokens-error-msg">
                            Error: {{ flash.message }}
                        </div>
                        {{/if}}
                        <input class="manage-tokens-button" type="submit" value="Create token">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="module">
        import init, * as Rust from "/assets/wasm/wasm_pbkdf2.js";

        // A byte order mark character can show up as a result of the conversion
        // between Rust strings (UTF-8) and JavaScript strings (UTF-16).
        // This function removes it if there is one.
        function removeByteOrderMark(inputString) {
            return (inputString.charCodeAt(0) === 0xFEFF)
                ? inputString.substr(1)
                : inputString;
        }

        (async () => {
            await init();
            const form = document.querySelector('form.manage-passwd');
            const password = form.querySelector('input[type="password"]#current-password');
            const new_password = form.querySelector('input[type="password"]#new-password');
            const confirm_password = form.querySelector('input[type="password"]#confirm-password');
            const button = form.querySelector('input[type="submit"]');
            const email = "{{ user.email }}";
            form.addEventListener("submit", function (event) {
                event.preventDefault();
                button.disabled = true;
                button.value = "Loading...";
                password.value = removeByteOrderMark(Rust.pbkdf2_encode(password.value, email, 5000));
                new_password.value = removeByteOrderMark(Rust.pbkdf2_encode(new_password.value, email, 5000));
                confirm_password.value = removeByteOrderMark(Rust.pbkdf2_encode(confirm_password.value, email, 5000));
                this.submit();
            });
        })();
    </script>
    <script>
        const form = document.querySelector('form.manage-tokens-create');
        const button = form.querySelector('input[type="submit"]');
        form.addEventListener("submit", function (event) {
            button.disabled = true;
            button.value = "Loading...";
        }, { passive: true });
    </script>
</body>

</html>
